<!DOCTYPE html>
<html xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8">
    <title>Class 与 Style 绑定</title>
    <script src="./lib/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
    <!--    绑定 HTML 对象 start  active 这个 class 存在与否将取决于数据 property isActive 的值-->
    <div
            class="test"
            v-bind:class="[ isActive ? 'active' : '', isGreen ? 'green' : '']"
            style="width:200px; height:200px; text-align:center; line-height:200px;">
        hi vue
    </div>
    <!--    绑定 HTML 对象 end-->
    <!--    内联样式语法绑定 start-->
    <div
            :style="{color:color, fontSize:size, background: isRed ? '#FF0000' : ''}">
        hi vue
    </div>
    <!--    内联样式语法绑定 end-->
</div>
<script type="text/javascript">
    var vm = new Vue({
        el: "#app",
        data: {
            isActive: true,
            isGreen: true,
            color: "#FFF000",
            size: '50px',
            isRed: true
        }
    });
</script>
<style>
    .test {
        font-size: 30px;
    }

    .green {
        color: #00FF00;
    }

    .active {
        background: #FF0000;
    }
</style>
</body>
</html>
